import React, { useState } from 'react';
import { Form, Checkbox } from 'antd';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import styled from '@emotion/styled';

// 定义组件的属性类型接口
interface SummaryCheckboxProps {
    name: string;
    label: string;
    required: boolean;
    options: string[];
    onChange: (value: string[]) => void;
}

// 定义组件的样式
const CheckboxItem = styled(Checkbox)`
    margin: 0 10px 0 0;
    margin-left: 0 !important;
`;

const SummaryCheckbox = (props: SummaryCheckboxProps) => {
    const { name, label, required, options, onChange } = props;

    const [checked, setChecked] = useState<CheckboxValueType[]>([]);

    const handleChange = (checkedValues: CheckboxValueType[]) => {
        console.log('checked = ', checkedValues);
        setChecked(checkedValues);
        onChange(checkedValues as string[]);
    };

    return (
        <Form.Item label={label} name={name}  required={required} rules={[{ required: required, message: `请选择${label}` }]}>
            <Checkbox.Group value={checked} onChange={handleChange}>
                {options.map((item, idx) => (
                    <CheckboxItem key={idx} value={item}>{item}</CheckboxItem>
                ))}
            </Checkbox.Group>
        </Form.Item>
    );
};

export default SummaryCheckbox;